<template>
  <view class="main">
    <view class="search">
      <view class="search_input"><my-search @click.native="goSearch"></my-search></view>
      <view class="qqq" v-if="list" @click="show"><uni-icons type="list" size="30"></uni-icons></view>
      <view v-else @click="show" class="qqq"><uni-icons type="bars" size="30"></uni-icons></view>
    </view>
    <view class="nav">
      <view @click="chooseThis('all')" :class="sortType === 'all' ? 'active' : ''">综合</view>
      <view @click="chooseThis('sales')" :class="sortType === 'sales' ? 'active' : ''">销量</view>
      <view class="price" @click="chooseThis('price')" :class="sortType === 'price' ? 'active' : ''">
        <text>价格</text>
        <!-- {{ color1 }}
        {{ color2 }} -->
        <view class="icon">
          <uni-icons type="back" size="15" :color="{ color2 }"></uni-icons>
          <uni-icons type="forward" size="15" :color="{ color2 }"></uni-icons>
        </view>
      </view>
    </view>
    <view class="twoLine" v-if="list">
      <view class="goods" v-for="item in goodsList" :key="item.goods_id" @click="goDetail(item.goods_id)">
        <image :src="item.goods_image"></image>
        <text class="text">{{ item.goods_name }}</text>
        <view class="goods_price">
          <text class="newPrice">￥{{ item.goods_price_min }}</text>
          <view class="oldPrice"
            ><del>￥{{ item.goods_price_max }}</del></view
          >
        </view>
      </view>
    </view>
    <view class="oneLine" v-else>
      <view class="goods" v-for="item in goodsList" :key="item.goods_id" @click="goDetail(item.goods_id)">
        <view>
          <image :src="item.goods_image"></image>
        </view>
        <view>
          <view class="text"> {{ item.goods_name }}</view>
          <view class="sell">已售{{ item.selling_point || 0 }}件</view>
          <view class="goods_price">
            <text class="newPrice">￥{{ item.goods_price_min }}</text>
            <view class="oldPrice"
              ><del>￥{{ item.goods_price_max }}</del></view
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mySearch from '@/components/my-search.vue'
export default {
  components: {
    mySearch,
  },
  data() {
    return {
      goodsList: [],
      goodsName: '',
      page: 1,
      sortPrice: 0,
      time: 0,
      sortType: 'all',
      color1: '#000',
      color2: '#000',
      color3: '#000',
      list: true,
    }
  },
  onLoad({ goodsName }) {
    this.goodsName = goodsName
    this.chooseThis('all')
  },
  watch: {
    // color1: {
    // immediate: true,
    // deep: true,
    // handler: (newcolor, oldcolor) => {
    // this.color2 = this.color2 === 'newcolor' ? 'oldcolor' : 'newcolor'
    // this.color3 = newcolor
    // },
    // },
  },
  methods: {
    goDetail(goodsId) {
      // console.log(id)
      uni.navigateTo({
        url: '/pages_sub1/product-detail/product-detail?goodsId=' + goodsId,
      })
    },
    show() {
      this.list = this.list === false ? true : false
    },
    //点击搜索到搜索页面
    goSearch() {
      uni.navigateTo({
        url: '/pages_sub1/search/search',
      })
    },
    async chooseThis(sortType) {
      // console.log(123456789, this.sortPrice)
      this.sortType = sortType
      if (sortType === 'price') {
        this.time += 1
        // console.log(this.time)
        this.color1 = this.time % 2 === 0 ? '#008080' : '#000'
        this.color2 = this.time % 2 === 1 ? '#008080' : '#000'
        // console.log(this.color1, '颜色1')
        // console.log(this.color2, '颜色2')
        this.sortPrice = this.sortPrice === 0 ? 1 : 0
        const {
          data: {
            list: { data, total },
          },
        } = await this.$http.get('/goods/list', {
          sortType: 'price',
          sortPrice: this.sortPrice,
          goodsName: this.goodsName,
          page: this.page,
        })
        console.log(data, total)
        this.goodsList = data
      } else {
        const {
          data: {
            list: { data, total },
          },
        } = await this.$http.get('/goods/list', {
          sortType,
          goodsName: this.goodsName,
          page: this.page,
        })
        console.log(data, total)
        this.goodsList = data
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  .search {
    display: flex;
    .search_input {
      flex: 1;
    }
    .qqq {
      padding-right: 20rpx;
      background-color: #eee;
      line-height: 90rpx;
    }
  }
  .nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80rpx;
    font-size: 40rpx;
    .active {
      color: red;
    }
    .price {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .icon {
        transform: rotate(90deg);
      }
    }
  }
  .twoLine {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10rpx;
    .goods {
      width: 50%;
      image {
        width: 350rpx;
        height: 350rpx;
      }
      .text {
        display: block;
        padding: 10rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .goods_price {
        display: flex;
        justify-content: space-around;
        line-height: 50rpx;
        .newPrice {
          color: red;
          font-size: 36rpx;
        }
        .oldPrice {
          color: #bbb;
          font-size: 28rpx;
        }
      }
    }
  }
  .oneLine {
    padding: 10rpx;
    .goods {
      width: 100%;
      display: flex;
      image {
        width: 360rpx;
        height: 360rpx;
      }
      .text {
        display: block;
        padding: 10rpx;
      }
      .goods_price {
        display: flex;
        justify-content: space-around;
        line-height: 50rpx;
        .newPrice {
          color: red;
          font-size: 36rpx;
        }
        .oldPrice {
          color: #bbb;
          font-size: 28rpx;
        }
      }
    }
  }
}
</style>
